import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

/*
  vuex是最好非父子传参方式，
  vue的状态存储说的就是vuex
*/
// vuex刷新数据会重置 无法持久化
// 1.下载持久化插件 npm i vuex-persistedstate
// 2.引入持久化插件
import createPersistedState from "vuex-persistedstate"
export default new Vuex.Store({
  // 存储公共状态 或者 公共数据
  state: {
    count: 0,
    hi: "hello"
  },
  // 相当于计算属性
  getters: {
    num(state) {
      return state.count + 10
    }
  },
  // 用来处理同步数据，修改state里的值
  mutations: {
    // 接收二个参数 一个state 一个传参
    CHANGE_COUNT(state, params) {
      state.count += params
    }
  },
  // 用来处理异步数据（调接口）
  actions: {
    // 俩个参数 context 里面有自带的方法
    handleChange(context, params) {
      console.log(context, params, 'handleChange');
      // 通过context.commit 去出发mutations里的方法
      context.commit('CHANGE_COUNT', params)
    },
    // context = {commit :f ,dispatch:f} = {commit}
    change({ commit }, data) {
      commit("CHANGE_COUNT", 2)
    }
  },
  // 子模块
  modules: {
    user
  },
  // 配置就持久化插件
  plugins: [

    createPersistedState({
      // 默认存到localstorage
      // 
      storage: sessionStorage,
      // 存储的key名
      key: 'my-key',
      // 存储指定变量
      paths: ["count"]
    })
  ],
})
